<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>bui-ssm快速开发框架</title>
<head th:include="source::header"></head>
<script type="application/javascript" th:src="@{/static/lib/encrypt-min.js}"></script>
<style type="text/css">
body {
	height: 100%;
	position: relative;
}

body>div {
	width: 100%;
	position: absolute;
}

#header {
	height: 70px;
	z-index: 2;
	background: #0986D6;
	text-align: center;
}
#header > div{
	widht:1024px;
	
}
#header > div h1{
	line-height: 70px;
	color:#fff;
	font-size:18px;
}

#main_body {
	z-index: 1;
	border-top: 70px solid #fff;
	border-bottom: 100px solid #fff;
	width: 1024px;
	margin: 0 auto;
	height: 100%;
	position: relative;
}

#footer {
	height: 100px;
	z-index: 2;
	bottom: 0;
}

#footer p {
	line-height: 32px;
	text-align: center;
}

#footer p a {
	padding: 0 20px;
}

#content {
	width: 1024px;
	height: 360px;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

#content>div {
	height: 100%;
}



#login {
	width: 370px;
	float: right;
	border: 7px solid #DBEDFF;
	padding: 22px;
	background: #FFFFFF;
}

.title {
	font-size: 18px;
	height: 30px;
	line-height: 30px;
	padding-left: 20px;
	border-left: 10px solid #0986d6;
	color: #333333;
}

.title cite {
	color: #C4C4C4;
	margin-left: 15px;
	font-weight: 400;
}

.add-box {
	margin-top: 25px;
}

.add-box .add-con {
	height: 38px;
	margin-bottom: 25px;
	position: relative;
}

.add-box a.loginn {
	border-radius: 4px;
	background: #0e89cc;
	color: #FFFFFF;
	width: 100%;
	height: 38px;
	line-height: 38px;
	text-align: center;
	font-size: 16px;
	display: block;
}

.add-box .add-con i {
	font-size: 20px;
	color: #666666;
	position: absolute;
	top: 10px;
	left: 10px;
	border-right: 1px solid #E6E6E6;
	padding-right: 13px;
}

.code .change {
	color: #0044CC;
}

.text {
	display: block;
	position: absolute;
	top: 6px;
	right: 0px;
    font-size: 14px;
    text-align: right;
    cursor:pointer;
}

.w100 {
	width: 100px !important;
}

.code_img {
	display: inline-block;
	position: absolute;
	top: 6px;
	left: 170px;
}

.add-box .add-con input {
	width: 260px;
	height: 38px;
	line-height: 38px;
	outline: none !important;
	font-size: 16px;
	padding-left: 50px;
	color: #333333;
	border: 1px solid #E6E6E6;
}
</style>
</head>
<body>	
	<div id="header">
		<div>
			<h1>BUI-SSM-代码生成器-整合通用权限功能的高效开发框架</h1>
		</div>
	</div>
	<div id="main_body" class="k_box_size">
		<div id="content">
			<div id="logo"></div>
			<div id="login" class="k_box_size">
				<div class="title">
					用户登录 <cite>LOGIN</cite>
				</div>
				<div class="add-box">
					<div class="add-con">
						<i class="fa fa-user"></i> 
						<input type="text" id="userName" />
					</div>
					<div class="add-con">
						<i class="fa fa-key"></i> 
						<input type="password" id="userPwd">
					</div>
					<div class="add-con code">
						<i class="fa fa-file-image"></i> 
							<input type="text" class="w100" id="imgCode">
						<div class="code_img">
							<img id="img_code">
						</div>
						<div class="text">
							<p id="makeImg">看不清？</p>							
						</div>
					</div>
					<a href="#" id="login_btn" class="loginn"> 登录 </a>
					<p id="message" style="line-height:30px;color:red;text-align:center;margin-top:5px;">测试账号 ：admin1 ; 密码：111111</p>
				</div>
			</div>
		</div>
	</div>
	<div id="footer">
		<p>
			<a>联系我们</a><a>关于平台</a><a>平台帮助</a>
		</p>
		<p>Copyright © 2017 - [(${year})] Kevin.Huang</p>
	</div>
	<script type="application/javascript" th:inline="javascript">
			var $imgCode,
				imgKey,
				$message;
			function getImgCode(){
				$B.request({
					url:$B.getHttpHost(ctxPath)+"main/getCode",
					ok:function(key,imgData){
						$imgCode[0].src = imgData;
						imgKey = key;
					}
				});
			}
			$(function(){
				$message = $("#message");
				$imgCode = $("#img_code");
				getImgCode();
				$("#makeImg").click(function(){
					getImgCode();
				});
				var $form = $("#login");
				var validObj = new $B.Validate({
					userName: [{rule:'require',"msg":"用户名必填"}],
					userPwd: [{rule:'require',"msg":"密码必填"}]
	            }, $form);				
				var lBtn = $("#login_btn").click(function(){
					if(validObj.valid($form)){
						var $btn = $(this);
						$btn.attr("disabled","disabled").text("正在登录...");
						var userPwd = $B.encryptData($("#userPwd").val());
						console.log("userPwd "+userPwd);
						$B.request({
							url:$B.getHttpHost(ctxPath)+"main/login",
							data:{
									userName:$("#userName").val(),
									userPwd:userPwd,
									imgKey:imgKey,
									imgCode:$("#imgCode").val()
								},
							ok:function(msg,data){
								$btn.attr("disabled","disabled").text("正在进入系统...");
								window.location.href = $B.getHttpHost(ctxPath)+"main/page/index";
							},
							fail:function(message,res){
								  imgKey = res.data.imgKey;		
								  $imgCode[0].src = res.data.img;
								  $message.html(message);
								  setTimeout(function(){
									  $message.html('测试账号 ：admin1 ; 密码：111111');
								  },2000);
							},
							final:function(){
								$btn.removeAttr("disabled","disabled").text("登录");
							}
						});
					}
				});
				$(document).keyup(function(event){
					if (event.keyCode == "13") {
						lBtn.trigger("click");
					}
				});
				if(window.top !== window.self){
					window.top.location.href = $B.getHttpHost(ctxPath);
				}
			});	
	</script>
</body>
</html>